<template>
  <div class="content">
    <!--   本位币金额 摘要 弹窗-->
    <el-dialog
      v-dialogDrag
      :title="title"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="600px"
      top="5vh"
      :before-close="handleClose"
    >
      <div class="money">
        <div class="moneyLeft">
          <el-tree
            :data="clientlDialogData"
            :props="defaultProps"
            node-key="fentryId"
            :default-expanded-keys="[0]"
            @node-click="handleNodeClick"
          />
        </div>
        <div class="moneyRight">
          <span>{{ $t('market.fcalFmoney') }}<!--金额取数公式-->：</span><br>
          <el-input v-model="fcalFmoney" type="textarea" size="mini" style="height: 150px;" />
        </div>
      </div>
      <div>
        {{ $t('market.himt') }}：<br>
        1、{{ $t('market.doubleCli') }}<!--双击树节点选择对应字段-->;<br>
        2、{{ $t('market.fetch') }}<!--取数公式支持加(+)减(-)乘(*)除(/),运算符前后需加空格-->;<br>
        3、{{ $t('market.examples') }}<!--例子-->：FAmount + 10, FAmount * 0.17, FAmount + FAmtTax<br>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="confirmConfig">{{ $t('btn.confirm') }}</el-button>
        <el-button @click="handleClose">{{ $t('btn.cancel') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { queryTreeOptionList } from '@/api/financial/voucher'

export default {
  props: {
    title: {
      type: String,
      default: '金额来源设置'
    },
    ftempId: {
      type: Number,
      default: 0
    },
    msg: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      // 配置列表数据分页
      isclientlDialog: true,
      clientlDialogData: [{
        fname: '全部',
        fentryId: 0,
        dataList: []
      }],
      defaultProps: {
        children: 'dataList',
        label: 'fname'
      },
      fcalFmoney: '',
      treeClickCount: 0
    }
  },
  watch: {
    msg: {
      handler(val) {
        this.fcalFmoney = val
      },
      immediate: true
    }
  },
  created() {
    this.queryTBdCustomerList()
  },
  methods: {
    // 获取配置列表
    async queryTBdCustomerList() {
      const DATA = {
        ftempId: this.ftempId
      }
      const { data: RES } = await queryTreeOptionList(DATA)
      this.clientlDialogData[0].dataList = RES
    },
    // 双击
    handleNodeClick(data, node) {
      this.treeClickCount++
      if (this.treeClickCount >= 2) {
        return
      }
      this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          this.treeClickCount = 0
        } else if (this.treeClickCount > 1) {
          this.treeClickCount = 0
          this.fcalFmoney += data.fname
        }
      }, 300)
    },
    // 返回数据
    confirmConfig() {
      this.$emit('client', this.fcalFmoney)
    },
    // 关闭前回调
    handleClose() {
      this.$emit('client', '')
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
  .money {
    display: flex;
    height: 450px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    .moneyLeft, .moneyRight {
      overflow: auto;
      width: 50%;
    }
    .el-textarea::v-deep .el-textarea__inner {
      height: 150px;
    }
  }
}
</style>
